<template>
	<view>
		<view class="slider-box">
			<view class="flex"></view>
			<movable-area class="sliderBar" :style="{ width: 100 - minScore + '%' }">
				<view class="gone" :style="{ width: x + 'px' }"></view>
				<movable-view class="slider" :x="x" :y="y" direction="all" @change="onChange">
					<!-- <text>{{ score }}</text> -->
				</movable-view>
			</movable-area>
			<view :style="{ width: 100 - maxScore + '%' }"></view>
		</view>
	</view>
</template>

<script>
export default {
	props: ['min', 'max','value','Width'],
	data() {
		return {
			slideBarWidth: this.Width,
			minScore: this.min ? this.min : 0,
			maxScore: this.max ? this.max : 100,
			x: 0,
			y: 0,
			score: this.min ? this.min : 0
		};
	},
	created() {
	},
	watch: {
			// 监听父组件传来的 value，更新滑块位置
			value(newValue) {
				if (newValue !== undefined) {
					this.updateSliderPosition(newValue);
				}
			}
		},
	methods: {
		 onChange: function (e) {
		      // 计算新位置的 score
		      let newX = e.detail.x;
		      let newScore = parseInt((newX / this.slideBarWidth) * 100) + parseInt(this.minScore);
		      
		      // 如果 score 达到最大值（100），则不再增加 x 和 score
		      if (newScore >= 100) {
		        newX = this.slideBarWidth;
		        newScore = 100;
		      }
		      
		      this.x = newX;
		      this.score = newScore;
		
		      this.$emit('change', this.score);
		    },
		    // 根据 value 计算 x 坐标
		    updateSliderPosition(value) {
		      // 计算值对应的 x 坐标
		      const percentage = (value - this.minScore) / (this.maxScore - this.minScore);
		      this.x = this.slideBarWidth * percentage;
		    }
	}
};
</script>

<style lang="scss">
$uni-color-primary: #00d8af;
.slider-box {
	display: flex;
	width: 100%;
	height: 32rpx;
	position: relative;
	&::before {
		content: '';
		position: absolute;
		height: 6px;
		border-radius: 8rpx;
		background-color: #eeeeee;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		width: 100%;
	}
	.flex {
		flex: 1;
		height: 6px;
		border-radius: 8rpx 0 0 8rpx;
		background-color: $uni-color-primary;
		margin-top: 12rpx;
		position: relative;
		z-index: 1;
	}

	.sliderBar {
		height: 100%;
		border-radius: 8rpx;
		width: 100%;
		.gone {
			background-color: $uni-color-primary;
			// height: 100%;
			position: absolute;
			left: 0;
			height: 6px;
			top: 12rpx;
			max-width: 100%;
			z-index: 1;
			border-radius: 8rpx;
		}
		.slider {
			width: 0;
			height: 100%;
			position: relative;
			z-index: 2;
			&::after {
				content: '';
				position: absolute;
				border-radius: 16rpx;
				// background-color: $uni-color-primary;
				background-color: #fff;
				// background-image: url('/static/bg1.png');
				// background-size: 26px 26px;
				width: 32rpx;
				height: 100%;
				transform: translatex(-50%);
				box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2); /* 为模糊的背景添加阴影 */
			}
			text {
				position: absolute;
				width: 60rpx;
				color: white;
				border-radius: 14rpx;
				top: -140%;
				left: 50%;
				text-align: center;
				transform: translateX(-50%);
				background-color: $uni-color-primary;
				&::after {
					content: '';
					position: absolute;
					border: 6rpx solid transparent;
					border-top-color: $uni-color-primary;
					top: 99%;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}
}
</style>